<template>
  <div id="recommend-view" style="padding: 10px; padding-bottom: 80px; background-color: #F6F7F9; height: 100%;">
    <!-- 分类列表 -->
    <h3 style="margin-bottom: 20px; margin-left: 5px">所有分类</h3>
    <category-card :categories="categories" @openCategoryInfoView="openCategoryInfoView"
                   @updateCurrentCategory="updateCurrentCategory"></category-card>

    <!-- 商品展示 -->
    <h3 style="margin-top: 20px ;margin-bottom: 10px; margin-left: 5px;">热门推荐</h3>
    <product-card-row :products="products"></product-card-row>

    <category-info-view v-if="showCategoryInfo" @closeCategoryInfoView="closeCategoryInfoView"
                        :category="currentCategory"></category-info-view>
  </div>
</template>

<script>
import CategoryCard from '@/components/CategoryCard.vue'
import ProductCardRow from '@/components/ProductCardRow.vue'
import CategoryInfoView from '@/views/template-views/CategoryInfoView.vue';
import http from '@/plugins/http'
export default {
  name: "cats-view",
  components: {
    CategoryCard,
    ProductCardRow,
    CategoryInfoView
  },
  data() {
    return {
      showCategoryInfo: false,
      currentCategory: {},
      categories: [],
      products: []
    }
  },
  mounted(){
    this.loadPage();
  },

  methods: {
    loadPage(){
      http.get('/category/all').then(res=>{
        if(res.statusCode==='200')
        {
          console.log(res.data)
          this.categories = res.data.slice(0, 8);
        }
      })
      http.get('/product/getCat').then(res=>{
        if(res.statusCode==='200')
        {
          console.log(res.data)
          this.products=res.data;
        }
      })
    },
    openCategoryInfoView() {
      this.showCategoryInfo = true;
    },
    closeCategoryInfoView() {
      this.showCategoryInfo = false;
    },
    updateCurrentCategory(category) {
      this.currentCategory = category;
    }
  }
}
</script>

<style scope>
.card {
  border-radius: 15px;
  overflow: hidden;
}
</style>